import React, { useState, useImperativeHandle } from 'react';
import styles from './index.module.less';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import { useSelector } from 'react-redux';
import { MenuItem } from '@/interface/common';

const OptionsNav = React.forwardRef((_props, ref) => {
  const [visible, setVisible] = useState(false);

  // 从redux的store对象中提取数据(state)。
  const { common } = useSelector((state: any) => ({
    common: state.common
  }));
  // 点击的是当前对象
  const handleToggle = (e: React.MouseEvent) => {
    if (e?.target !== e?.currentTarget) {
      return;
    }
    setVisible(!visible);
  }
  useImperativeHandle(ref, () => ({
    toggleVisible: handleToggle
  }));
  return (
    <div className={classnames(styles['wrap'], !visible ? styles['hide'] : '')} onClick={handleToggle}>
      <div className={styles['scroll-wrap']}>
        <div className={styles['container']}>
          {

          }
        </div>
      </div>
      <div className={styles['footer']}>
        <span onClick={handleToggle}>
          <i className={classnames('iconfont icon', styles['icon'])}>&#xe6e5;</i>
        </span>
      </div>
    </div>
  );
})

export default OptionsNav;